<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>饼状图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .chart {
            width: 100%;
            height: 100%;
        }
    </style>
    <!--    <script src="./echarts.min.js"></script>-->

    <!-- 方式二 -->
    <script src=" https://cdn.staticfile.org/echarts/5.5.0/echarts.min.js"></script>
    <!-- 或者 方式三  -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script> -->
</head>

<body>
<div id="chart" class="chart"></div>

<script type="text/javascript">
        const fontSizeNum = 36;
        const chartBox = document.getElementById("chart");
        var Chart = echarts.init(chartBox);
        var option = {
        tooltip: {trigger: 'item'},
            series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center'
      },
       data: [
        { value: 1048, name: '深睡眠' , itemStyle: {color: '#10B7E3'}},
        { value: 735, name: '浅睡眠', itemStyle: {color: '#AD96FC'}},
        { value: 580, name: '清醒', itemStyle: {color: '#FD9C66'}}
      ]
    }
  ]
        };


     function setOriginChartData(originChartData) {
            option=JSON.parse(originChartData)
             Chart.setOption(option);
      }
    </script>
</body>

</html>